<template>
    <!-- 每次上传只能进行一次 -->
    <div class="aplly-detail">
        <p><span class="pointer" @click="$router.back()">审批</span><span class="arrow">></span><span>{{formName}}</span></p>
        <div class="clear detail">
            <div class="fl">
                <el-form 
                    :model="ruleForm"
                    ref="ruleForm"
                    label-width="140px"
                    label-position="left"
                    class="demo-ruleForm">
                    <template v-for="(item,index) in formData">
                        <!-- 单行输入框 -->
                        <div v-if="item.id==1">
                            <el-form-item
                                :key="index"
                                :label="item.title"
                                :title="item.title"
                                :prop="propName + index + '.content'"
                                :rules="{ required: item.required, message: '不能为空', trigger: 'change'}">
                                <el-input class="input" :placeholder="item.reminder" v-model.trim.native="item.content" :maxlength="item.maxLength"></el-input>
                            </el-form-item>
                        </div>

                        <!-- 多行输入框 -->
                        <div v-if="item.id==2">
                            <el-form-item
                                :key="index"
                                :label="item.title"
                                :title="item.title"
                                :prop="propName + index + '.content'"
                                :rules="{ required: item.required, message: '不能为空', trigger: 'change'}">
                                <el-input
                                    class="textarea"
                                    :placeholder="item.reminder"
                                    v-model="item.content"
                                    type="textarea"
                                    autosize
                                    :maxlength="item.maxLength"
                                    show-word-limit>
                                </el-input>
                            </el-form-item>
                        </div>

                        <!-- 数字输入框 -->
                        <div v-if="item.id==3">
                            <el-form-item
                                :key="index"
                                :label="item.title"
                                :title="item.title"
                                :prop="propName + index + '.content'"
                                :rules="{ required: item.required, message: '不能为空', trigger: 'change'}">
                                <el-input type="text" class="number" @input="resetNumberInput(index)" @blur='resetNumber(index)' :placeholder="item.reminder" v-model.trim.native="item.content"></el-input>
                            </el-form-item>
                        </div>

                        <!-- 单选框 -->
                        <div v-if="item.id==4">
                            <el-form-item
                                :key="index"
                                :label="item.title"
                                :title="item.title"
                                :prop="propName + index + '.content'"
                                :rules="{ required: item.required, message: '不能为空', trigger: 'change'}">
                                <el-select class="select" v-model="item.content" :placeholder="item.reminder">
                                    <el-option
                                        v-for="(radioItem,radioKey) in item.option"
                                        :key="radioItem.key"
                                        :label="radioItem.value"
                                        :value="radioItem.key">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>

                        <!-- 多选框 -->
                        <div v-if="item.id==5">
                            <el-form-item
                                :key="index"
                                :label="item.title"
                                :title="item.title"
                                :prop="propName + index + '.content'"
                                :rules="{ required: item.required, message: '不能为空', trigger: 'change'}">
                                <el-select class="select"  v-model="item.content" multiple :placeholder="item.reminder">
                                    <el-option
                                        v-for="(radioItem,radioKey) in item.option"
                                        :key="radioItem.key"
                                        :label="radioItem.value"
                                        :value="radioItem.key">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>

                        <!-- 日期 -->
                        <div v-if="item.id==6">
                            <el-form-item
                                :key="index"
                                :label="item.title"
                                :title="item.title"
                                :prop="propName + index + '.content'"
                                :rules="{ required: item.required, message: '不能为空', trigger: 'change'}">
                                <el-date-picker
                                    class="date"
                                    :editable="false"
                                    v-model="item.content"
                                    :type="item.dateType==1?'datetime':'date'"
                                    :format="item.dateType==1?'yyyy-MM-dd HH:mm':'yyyy-MM-dd'"
                                    :placeholder="item.reminder"
                                    value-format="timestamp">
                                </el-date-picker>
                                <img :class="{dateIcon: true, hideIcon: item.content? true : false}" src="../../../assets/images/examine/date.png" alt="日期组件图标">
                            </el-form-item>
                        </div>

                        <!-- 日期区间 -->
                        <div v-if="item.id==7">
                            <el-form-item
                                :label="item.title"
                                :title="item.title"
                                :prop="propName + index + '.content'"
                                :rules="{ required: item.required, message: '不能为空', trigger: 'change'}">
                                <el-date-picker
                                    class="date"
                                    :editable="false"
                                    v-model="item.content"
                                    :type="item.dateType==1?'datetime':'date'"
                                    :format="item.dateType==1?'yyyy-MM-dd HH:mm':'yyyy-MM-dd'"
                                    :placeholder="item.reminder"
                                    @click.native="initDate=item.content"
                                    @change="changeValue1(item, item.dateType)"
                                    value-format="timestamp">
                                </el-date-picker>
                                <img :class="{dateIcon: true, hideIcon: item.content? true : false}" src="../../../assets/images/examine/date.png" alt="日期组件图标">
                            </el-form-item>
                            <el-form-item
                                :label="item.title2"
                                :title="item.title2"
                                :prop="propName + index + '.content2'"
                                :rules="{ required: item.required, message: '不能为空', trigger: 'change'}">
                                <el-date-picker
                                    class="date"
                                    :editable="false"
                                    v-model="item.content2"
                                    :type="item.dateType==1?'datetime':'date'"
                                    :format="item.dateType==1?'yyyy-MM-dd HH:mm':'yyyy-MM-dd'"
                                    :placeholder="item.reminder"
                                    @click.native="initDate=item.content2"
                                    @change="changeValue2(item, item.dateType)"
                                    value-format="timestamp">
                                </el-date-picker>
                                <img :class="{dateIcon: true, hideIcon: item.content2? true : false}" src="../../../assets/images/examine/date.png" alt="日期组件图标">

                                <!-- <el-date-picker
                                    :editable="false"
                                    v-model="item.content"
                                    :type="item.dateType==1?'daterange':'datetimerange'"
                                    :format="item.dateType==1?'yyyy-MM-dd':'yyyy-MM-dd HH:mm'"
                                    :start-placeholder="item.reminder"
                                    :end-placeholder="item.reminder"
                                    value-format="timestamp">
                                </el-date-picker> -->
                            </el-form-item>
                        </div>

                        <!-- 上传图片 -->
                        <div v-if="item.id==8" @click.capture="whichUpload($event,index)">
                            <el-form-item
                                :label="item.title"
                                :title="item.title"
                                :prop="propName + index + '.content'"
                                :rules="{ required: item.required, message: '不能为空', trigger: 'change'}">
                                <el-upload
                                    :class="{uploader: true,max: item.content? item.content.length >=9 : true}"
                                    :action="BASE_URL + '/api/resource/res_upload'"
                                    :headers="{
                                        Authorization: access_token
                                    }"
                                    list-type="picture-card"
                                    :limit="9"
                                    multiple
                                    :before-upload="beforeUpload"
                                    :on-exceed="handleExceed"
                                    :on-success="onSuccess"
                                    :on-error="onError"
                                    :on-remove="onRemove"
                                    :on-preview="uploadPreview"
                                    :file-list="item.content">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <span>{{item.comment}}</span>
                                <el-checkbox-group v-show="0" v-model="item.content">
                                    <el-checkbox v-for="(picURL, picKey) in item.content" :label="picURL" :key="picKey">{{picURL.url}}</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </div>

                        <!-- 明细组件 -->
                        <div class="detailTemplate" :key="index" v-if="item.id==9">
                            <i class="top-line"></i>
                            <p>{{item.title}}</p>
                            <template v-for="(detailItem, detailIndex) of formData[index].detail" >
                                <!-- 单行输入框 -->
                                <el-form-item
                                    v-if="detailItem.id==1"
                                    :key="detailIndex"
                                    :label="detailItem.title"
                                    :title="detailItem.title"
                                    :prop="propNameDetail+index+'].detail.'+  detailIndex + '.content'"
                                    :rules="{ required: detailItem.required, message: '不能为空', trigger: 'change'}">
                                    <el-input class="input" :placeholder="detailItem.reminder" v-model.trim.native="detailItem.content" :maxlength="item.maxLength"></el-input>
                                </el-form-item>

                                <!-- 多行输入框 -->
                                <el-form-item
                                    v-if="detailItem.id==2"
                                    :key="detailIndex"
                                    :label="detailItem.title"
                                    :title="detailItem.title"
                                    :prop="propNameDetail+index+'].detail.'+  detailIndex + '.content'"
                                    :rules="{ required: detailItem.required, message: '不能为空', trigger: 'change'}">
                                    <el-input
                                        class="textarea"
                                        :placeholder="detailItem.reminder"
                                        v-model="detailItem.content"
                                        type="textarea"
                                        autosize
                                        :maxlength="item.maxLength"
                                        show-word-limit>
                                    </el-input>
                                </el-form-item>

                                <!-- 数字输入框 -->
                                <el-form-item
                                    v-if="detailItem.id==3"
                                    :key="detailIndex"
                                    :label="detailItem.title"
                                    :title="detailItem.title"
                                    :prop="propNameDetail+index+'].detail.'+  detailIndex + '.content'"
                                    :rules="{ required: detailItem.required, message: '不能为空', trigger: 'change'}">
                                    <el-input type="text" class="number" @input="resetNumberInput(index,detailIndex)" @blur='resetNumber(index,detailIndex)' :placeholder="detailItem.reminder" v-model.trim.native="detailItem.content"></el-input>
                                </el-form-item>

                                <!-- 单选框 -->
                                <el-form-item
                                    v-if="detailItem.id==4"
                                    :key="detailIndex"
                                    :label="detailItem.title"
                                    :title="detailItem.title"
                                    :prop="propNameDetail+index+'].detail.'+  detailIndex + '.content'"
                                    :rules="{ required: detailItem.required, message: '不能为空', trigger: 'change'}">
                                    <el-select class="select" v-model="detailItem.content" :placeholder="detailItem.reminder">
                                        <el-option
                                            v-for="(radioItem,radioKey) in detailItem.option"
                                            :key="radioItem.key"
                                            :label="radioItem.value"
                                            :value="radioItem.key">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <!-- 多选框 -->
                                <el-form-item
                                    v-if="detailItem.id==5"
                                    :key="detailIndex"
                                    :label="detailItem.title"
                                    :title="detailItem.title"
                                    :prop="propNameDetail+index+'].detail.'+  detailIndex + '.content'"
                                    :rules="{ required: detailItem.required, message: '不能为空', trigger: 'change'}">
                                    <el-select class="select" v-model="detailItem.content" multiple :placeholder="detailItem.reminder">
                                        <el-option
                                            v-for="(radioItem,radioKey) in detailItem.option"
                                            :key="radioItem.key"
                                            :label="radioItem.value"
                                            :value="radioItem.key">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <!-- 日期 -->
                                <el-form-item
                                    v-if="detailItem.id==6"
                                    :key="detailIndex"
                                    :label="detailItem.title"
                                    :title="detailItem.title"
                                    :prop="propNameDetail+index+'].detail.'+  detailIndex + '.content'"
                                    :rules="{ required: detailItem.required, message: '不能为空', trigger: 'change'}">
                                    <el-date-picker
                                        class="date"
                                        :editable="false"
                                        v-model="detailItem.content"
                                        :type="detailItem.dateType==1?'datetime':'date'"
                                        :format="detailItem.dateType==1?'yyyy-MM-dd HH:mm':'yyyy-MM-dd'"
                                        :placeholder="detailItem.reminder"
                                        value-format="timestamp">
                                        </el-date-picker>
                                        <img :class="{dateIcon: true, hideIcon: detailItem.content? true : false}" src="../../../assets/images/examine/date.png" alt="日期组件图标">
                                    </el-select>
                                </el-form-item>

                                <!-- 日期区间 -->
                                <template v-if="detailItem.id==7">
                                    <el-form-item
                                        :label="detailItem.title"
                                        :title="detailItem.title"
                                        :prop="propNameDetail+index+'].detail.'+  detailIndex + '.content'"
                                        :rules="{ required: detailItem.required, message: '不能为空', trigger: 'change'}">
                                        <el-date-picker
                                            class="date"
                                            :editable="false"
                                            v-model="detailItem.content"
                                            :type="detailItem.dateType == 1?'datetime':'date'"
                                            :format="detailItem.dateType == 1?'yyyy-MM-dd HH:mm':'yyyy-MM-dd'"
                                            :placeholder="detailItem.reminder"
                                            @click.native="initDate = detailItem.content"
                                            @change="changeValue1(detailItem, detailItem.dateType)"
                                            value-format="timestamp">
                                            </el-date-picker>
                                            <img :class="{dateIcon: true, hideIcon: detailItem.content? true : false}" src="../../../assets/images/examine/date.png" alt="日期组件图标">
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item
                                        :label="detailItem.title2"
                                        :title="detailItem.title2"
                                        :prop="propNameDetail+index+'].detail.'+  detailIndex + '.content2'"
                                        :rules="{ required: detailItem.required, message: '不能为空', trigger: 'change'}">
                                        <el-date-picker
                                            class="date"
                                            :editable="false"
                                            v-model="detailItem.content2"
                                            :type="detailItem.dateType == 1?'datetime':'date'"
                                            :format="detailItem.dateType == 1?'yyyy-MM-dd HH:mm':'yyyy-MM-dd'"
                                            :placeholder="detailItem.reminder"
                                            @click.native="initDate = detailItem.content2"
                                            @change="changeValue2(detailItem, detailItem.dateType)"
                                            value-format="timestamp">
                                        </el-date-picker>
                                        <img :class="{dateIcon: true, hideIcon: detailItem.content2? true : false}" src="../../../assets/images/examine/date.png" alt="日期组件图标">
                                    </el-form-item>
                                </template>

                                <!-- 上传图片 -->
                                <el-form-item
                                    v-if="detailItem.id==8"
                                    @click.capture.native="whichUpload($event,index,detailIndex)"
                                    :label="detailItem.title"
                                    :title="detailItem.title"
                                    :prop="propNameDetail+index+'].detail.'+  detailIndex + '.content'"
                                    :rules="{ required: detailItem.required, message: '不能为空', trigger: 'change'}">
                                    <el-upload
                                        :class="{uploader: true,max: detailItem.content? detailItem.content.length >=9 : true}"
                                        :action="BASE_URL + '/api/resource/res_upload'"
                                        :headers="{
                                            Authorization: access_token
                                        }"
                                        list-type="picture-card"
                                        :limit="9"
                                        multiple
                                        :before-upload="beforeUpload"
                                        :on-exceed="handleExceed"
                                        :on-success="onSuccess"
                                        :on-error="onError"
                                        :on-remove="onRemove"
                                        :on-preview="uploadPreview"
                                        :file-list="detailItem.content">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <span>{{detailItem.comment}}</span>
                                    <el-checkbox-group v-show="0" v-model="detailItem.content">
                                        <el-checkbox v-for="(picURL, picKey) in detailItem.content" :label="picURL" :key="picKey">{{picURL.url}}</el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>

                                <!-- 请填写说明文字 -->
                                <a v-if="detailItem.id==10" class="caption" :href="detailItem.content" :target="detailItem.newWindow?'_blank':'_self'">{{detailItem.title}}</a>

                                <!-- 金额 -->
                                <el-form-item
                                    v-if="detailItem.id==11"
                                    :label="detailItem.title"
                                    :title="detailItem.title"
                                    :prop="propNameDetail+index+'].detail.'+  detailIndex + '.content'"
                                    :rules="{ required: detailItem.required, message: '不能为空', trigger: 'change'}">
                                    <el-input class="input" @input="resetNumberInput(index,detailIndex)" @blur='resetNumber(index,detailIndex)' :placeholder="detailItem.reminder" v-model.trim.native="detailItem.content"></el-input>
                                </el-form-item>
                                
                                <!-- 上传附件 -->
                                <el-form-item
                                    v-if="detailItem.id==12"
                                     @click.capture.native="whichUpload($event,index,detailIndex)"
                                    :label="detailItem.title"
                                    :title="detailItem.title"
                                    :prop="propNameDetail+index+'].detail.'+  detailIndex + '.content'"
                                    :rules="{ required: detailItem.required, message: '不能为空', trigger: 'change'}">
                                    <!-- <el-upload
                                        class="accessory"
                                        :action="BASE_URL + '/api/resource/res_upload'"
                                        :headers="{
                                            Authorization: access_token
                                        }"
                                        :limit="1"
                                        :on-exceed="handleExceedFile"
                                        :before-upload="beforeUploadFile"
                                        :on-success="onSuccessFile"
                                        :on-remove="onRemoveFile"
                                        :file-list="detailItem.content">
                                        <span class="clickUpload" :style="{color: detailItem.content.length>0?'#ccc':'#348EFC'}">点击上传</span>
                                    </el-upload> -->
                                    <uploader
                                        class="uploader-example"
                                        :ref="'uploader'"
                                        :options="options"
                                        :file-status-text="statusText"
                                        @file-success="fileSuccess"
                                        @file-fail="fileFail"
                                        @file-added="fileAded"
                                        @file-removed= 'fileRemoved'
                                        @file-progress="fileProgress">
                                        <uploader-unsupport></uploader-unsupport>
                                        <uploader-btn :single="true">点击上传</uploader-btn>
                                        <!-- 监听上传的进度，当上传进度为100的时候显示成功上传的附件名字，反则显示插件的上传进度 -->
                                        <div class="clearfix file" v-if="detailItem.process == 100 && detailItem.content[0]">
                                            <span class="fl">{{detailItem.content[0].name}}</span>
                                            <i class="fr" @click="changeFile(index, detailIndex)"></i>
                                        </div>
                                        <div class="clearfix file" v-else-if="detailItem.process == 100 && !detailItem.content[0]"></div>
                                        <uploader-list v-else></uploader-list>
                                    </uploader>

                                    <span>{{detailItem.comment}}</span>
                                    <el-checkbox-group v-show="0" v-model="detailItem.content">
                                        <el-checkbox v-for="(picURL, picKey) in detailItem.content" :label="picURL" :key="picKey">{{picURL.url}}</el-checkbox>
                                    </el-checkbox-group>
                                    <!-- <el-input v-show="0"  v-model="detailItem.content"></el-input> -->
                                </el-form-item>

                                <!-- 联系人 -->
                                <el-form-item
                                    v-if="detailItem.id==13"
                                    :label="detailItem.title"
                                    :title="detailItem.title"
                                    :prop="propNameDetail+index+'].detail.'+  detailIndex + '.content'"
                                    :rules="{ required: detailItem.required, message: '不能为空', trigger: 'change'}">
                                    <span class="pointer contacts" @click="openRoleView(detailItem)">请选择</span>
                                    <p>
                                        <span
                                            v-for="(contactsItem,contactsKey) in detailItem.content"
                                            :key="contactsKey">
                                            {{contactsItem.name}}
                                            <span v-if="contactsKey < detailItem.content.length-1">，</span>
                                        </span>
                                    </p>
                                    <el-checkbox-group v-show="0" v-model="detailItem.content">
                                        <el-checkbox v-for="member in detailItem.content" :label="member" :key="member.id">{{member}}</el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>

                                <!-- 计算公式 -->
                                <el-form-item v-if="detailItem.id==14" :label="detailItem.title" :title="detailItem.title">
                                    <p class="calculate">{{equationResult(detailItem.equation,item,'inside', detailIndex, index)}}</p>
                                </el-form-item>
                            </template>
                            <i class="bottom-line" v-if="showAddButton(index)"></i>
                            <el-button @click="addDetail(index,item)" v-if="showAddButton(index)" class="addDetail el-icon-plus" type="primary" plain>{{item.addDetail}}</el-button>
                            <i class="el-icon-close" @click="deleteDetail(index,item)"></i>
                        </div>

                        <!-- 请填写说明文字 -->
                        <div v-if="item.id==10">
                            <a class="caption" :href="item.content" :target="item.newWindow?'_blank':'_self'">{{item.title}}</a>
                        </div>

                        <!-- 金额 -->
                        <div v-if="item.id==11">
                            <el-form-item
                                :label="item.title"
                                :title="item.title"
                                :prop="propName + index + '.content'"
                                :rules="{ required: item.required, message: '不能为空', trigger: 'change'}">
                                <el-input class="input" @input="resetNumberInput(index)" @blur='resetNumber(index)' :placeholder="item.reminder" v-model.trim.native="item.content"></el-input>
                            </el-form-item>
                        </div>

                        <!-- 上传附件 -->
                        <div v-if="item.id==12" @click.capture="whichUpload($event,index)">
                            <el-form-item
                                :label="item.title"
                                :title="item.title"
                                :prop="propName + index + '.content'"
                                :rules="{ required: item.required, message: '不能为空', trigger: 'change'}">
                                <!-- <el-upload
                                    class="accessory"
                                    :action="BASE_URL + '/api/resource/res_upload'"
                                    :headers="{
                                        Authorization: access_token
                                    }"
                                    :limit="1"
                                    :on-exceed="handleExceedFile"
                                    :before-upload="beforeUploadFile"
                                    :on-success="onSuccessFile"
                                    :on-remove="onRemoveFile"
                                    :file-list="item.content">
                                    <span class="clickUpload" :style="{color: item.content.length>0?'#ccc':'#348EFC'}">点击上传</span>
                                </el-upload> -->
                                <uploader
                                    class="uploader-example"
                                    :ref="'uploader'"
                                    :options="options"
                                    :file-status-text="statusText"
                                    @file-success="fileSuccess"
                                    @file-fail="fileFail"
                                    @file-added="fileAded"
                                    @file-removed= 'fileRemoved'
                                    @file-progress="fileProgress">
                                    <uploader-unsupport></uploader-unsupport>
                                    <uploader-btn :single="true">点击上传</uploader-btn>
                                    <!-- 监听上传的进度，当上传进度为100的时候显示成功上传的附件名字，反则显示插件的上传进度 -->
                                    <div class="clearfix file" v-if="item.process == 100 && item.content[0]">
                                        <span class="fl">{{item.content[0].name}}</span>
                                        <i class="fr" @click="changeFile(index)"></i>
                                    </div>
                                    <div class="clearfix file" v-else-if="item.process == 100 && !item.content[0]"></div>
                                    <uploader-list v-else></uploader-list>
                                </uploader>

                                <span>{{item.comment}}</span>
                                <!-- <el-input v-show="0"  v-model="item.content"></el-input> -->
                                <el-checkbox-group v-show="0" v-model="item.content">
                                    <el-checkbox v-for="(picURL, picKey) in item.content" :label="picURL" :key="picKey">{{picURL.url}}</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </div>

                        <!-- 联系人 -->
                        <div v-if="item.id==13">
                            <el-form-item
                                :label="item.title"
                                :title="item.title"
                                :prop="propName + index + '.content'"
                                :rules="{ required: item.required, message: '不能为空', trigger: 'change'}">
                                <span class="pointer contacts" @click="openRoleView(item)">请选择</span>
                                <p>
                                    <span
                                        v-for="(contactsItem,contactsKey) in item.content"
                                        :key="contactsKey">
                                        {{contactsItem.name}}
                                        <span v-if="contactsKey < item.content.length-1">，</span>
                                    </span>
                                </p>
                                <el-checkbox-group v-show="0" v-model="item.content">
                                    <el-checkbox v-for="member in item.content" :label="member" :key="member.id">{{member}}</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </div>
                        
                        <!-- 计算公式 -->
                        <div v-if="item.id==14">
                            <el-form-item :label="item.title" :title="item.title">
                                <p class="calculate">{{equationResult(item.equation,item,'outside', undefined, index)}}</p>
                            </el-form-item>
                        </div>
                    </template>

                    <!-- 审批流程 -->
                    <div>
                        <el-form-item label="审批流程">
                            <!-- 审批人 -->
                            <div class="examineFlow clear">
                                <div class="fl">
                                    <i class="flow"></i>
                                    <p v-if="ruleForm.process_design && ruleForm.process_design.approver_name">{{ruleForm.process_design.approver_name}}</p>
                                    <p v-else>审批人</p>

                                    <!-- 发起人自选 -->
                                    <template v-if="ruleForm.type == 1">
                                        <span v-if="ruleForm.process_design.approval_model == 1">
                                            <span v-if="optionalApprover.length != 0">{{optionalApprover.length}}人依次审批</span>
                                            <span v-else >选择审批人</span>
                                        </span>
                                        <span v-if="ruleForm.process_design.approval_model == 2">
                                            <span v-if="optionalApprover.length != 0">{{optionalApprover.length}}人会签</span>
                                            <span v-else >选择审批人</span>
                                        </span>
                                        <span v-if="ruleForm.process_design.approval_model == 3">
                                            <span v-if="optionalApprover.length != 0">{{optionalApprover.length}}人或签}</span>
                                            <span v-else >选择审批人</span>
                                        </span>
                                    </template>
        
                                    <!-- 指定成员 -->
                                    <template v-if="ruleForm.type == 2">
                                        <span v-if="ruleForm.process_design.approval_model == 1 && ruleForm.approver.length != 0">
                                            <span>{{ruleForm.approver.length}}人依次审批</span>
                                        </span>
                                        <span v-if="ruleForm.process_design.approval_model == 2">
                                            <span>{{ruleForm.approver.length}}人会签</span>
                                        </span>
                                        <span v-if="ruleForm.process_design.approval_model == 3">
                                            <span>{{ruleForm.approver.length}}人或签</span>
                                        </span>
                                    </template>
        
                                    <!-- 发起人自己 -->
                                    <template v-if="ruleForm.type == 3">
                                        <!-- 只显示本人头像 -->
                                        <span>自己为审批人</span>
                                    </template>

                                    <!-- 班主任 -->
                                    <template v-if="ruleForm.type == 4">
                                        <!-- 只显示班主任头像 -->
                                        <span >班主任为审批人</span>
                                    </template>
                                </div>

                                <div class="fr">
                                    <template v-if="ruleForm.type == 1">
                                        <div class="approvers" v-for="(item,key) in optionalApprover">
                                            <img :src="BASE_URL + item.avatar_path" alt="用户头像">
                                            <p>{{item.name || item.approver_name}}</p>
                                            <img v-if="ruleForm.type == 1" @click="deleteArrIdx(optionalApprover,key)" src="../../../assets/images/examine/close.png" alt="关闭图标" class="close pointer">
                                            <img v-if="key != optionalApprover.length - 1" :src="ruleForm.process_design.approval_model == 1 ? arrowIcon : plusIcon" alt="流程图标" class="icon">
                                        </div>
                                    </template>

                                    <div v-if="ruleForm.type == 2 || ruleForm.type == 3 || ruleForm.type == 4 && ruleForm.have_master == 1" class="approvers" v-for="(item,key) in ruleForm.approver">
                                        <img :src="BASE_URL + item.avatar_path" alt="用户头像">
                                        <p>{{item.name || item.approver_name}}</p>
                                        <img v-if="ruleForm.type == 1" @click="deleteArrIdx(ruleForm.approver,key)" src="../../../assets/images/examine/close.png" alt="关闭图标" class="close pointer">
                                        <img v-if="key != ruleForm.approver.length - 1" :src="ruleForm.process_design.approval_model == 1 ? arrowIcon : plusIcon" alt="流程图标" class="icon">
                                    </div>
                                </div>

                                <i v-if="ruleForm.type == 1" @click="openRoleView('approver', optionalApprover, ruleForm.process_design.select_type)" class="pointer el-icon-plus"></i>
                            </div>

                            <!-- 抄送人 -->
                            <div class="examineFlow2">
                                <div class="fl">
                                    <i class="flow"></i>
                                    <p>抄送人</p>
                                    <span v-if="ruleForm.copier && ruleForm.copier.length == 0">选择抄送人</span>
                                    <span v-if="ruleForm.copier && ruleForm.copier.length != 0" >抄送{{ruleForm.copier.length + copier.length}}人</span>
                                </div>

                                <div class="fr">
                                    <div class="copier" v-for="(item,key) in ruleForm.copier">
                                        <img :src="BASE_URL + item.avatar_path" alt="用户头像">
                                        <p>{{item.name || item.approver_name}}</p>
                                        <img v-if="key != ruleForm.copier.length - 1 || copier.length != 0" :src="plusIcon" alt="流程图标" class="icon">
                                    </div>
                                    <div class="copier" v-for="(item,key) in copier">
                                        <img :src="BASE_URL + item.avatar_path" alt="用户头像">
                                        <p>{{item.name || item.approver_name}}</p>
                                        <img @click="deleteArrIdx(copier,key)" src="../../../assets/images/examine/close.png" alt="关闭图标" class="close pointer">
                                        <img v-if="key != copier.length - 1" :src="plusIcon" alt="流程图标" class="icon">
                                    </div>
                                </div>
                                <i class="pointer el-icon-plus" v-if="ruleForm.copier_status == 1" @click="openRoleView('approver', copier, 10, 10 - ruleForm.copier.length, ruleForm.copier)"></i>
                            </div>
                        </el-form-item>
                    </div>

                </el-form>

                <!-- 提交表单 -->
                <div class="submit">
                    <el-button @click="submitForm" type="primary">提交</el-button>
                </div>

                <!-- 上传图片预览弹窗 -->
                <el-dialog :title="'图片预览'" :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>

                <!-- 选择联系人,审批人，抄送人弹窗 -->
                <el-dialog
                    :close-on-click-modal="false"
                    :close-on-press-escape="false"
                    :title="'选择'"
                    :visible.sync="chooseRoleView"
                    width="800px">
                    <div class="contacts clear">
                        <div class="fl">
                            <el-select v-model="roleType" @change="updateUserList" placeholder="请选择">
                                <el-option
                                    v-for="(item1,key1) in roleList"
                                    :key="key1"
                                    :label="item1.name"
                                    :value="item1.id">
                                </el-option>
                            </el-select>   
                        </div>

                        <div class="fl">
                            <el-input
                                @keyup.enter.native="searchUser(keyword,$event)"
                                placeholder="用户账号、姓名"
                                v-model="keyword">
                            </el-input>
                            <el-button @click="searchUser(keyword,$event)" type="primary">搜索</el-button>
                        </div>

                        <div class="fl">
                            <ul>
                                <li v-for="(item3,key3) in userList" :key="key3">
                                    <span class="fl">{{key3 + 1 + '.' + item3.name}}</span>
                                    <span class="fl">{{item3.role_name}}</span>
                                    <span class="fl pointer" @click="addMember(key3)">添加</span>
                                </li>
                            </ul>
                        </div>

                        <div class="fl">
                            <ul>
                                <li class="clear">
                                    <span class="fl">账号</span>
                                    <span class="fl">用户名</span>
                                    <span class="fl">角色</span>
                                </li>
                                <li class="clear" v-for="(item4,key) in preMember" :key="key">
                                    <span class="fl">
                                        <i @click="cancelMember(key)" class="el-icon-close pointer"></i>
                                        {{item4.number}}
                                    </span>
                                    <span class="fl">{{item4.name}}</span>
                                    <span class="fl">{{item4.role_name}}</span>
                                </li>
                                
                            </ul>
                        </div>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancelFinalmember">取消</el-button>
                        <el-button @click="affirmFinalmember" type="primary">确定</el-button>
                    </div>
                </el-dialog>

            </div>
            <aside class="fl">
                <img src="../../../assets/images/examine/background.png" alt="右侧背景图片">
            </aside> 
        </div>
    </div>
</template>

<script type="text/javascript">
    export default {
        data(){
            return {
                arrowIcon: require('../../../assets/images/examine/arrow.png'),   // 流程图箭头图标
                plusIcon: require('../../../assets/images/examine/plus.png'),   // 流程图加号图标
                formName: '',   // 审批单的名字
                access_token: `Bearer ${this.$g.access_token}`,   // 上传组件的请求头
                ruleForm: {
                    form_set: []
                },   // shenpidanliebiao
                initDate: '',   // 存放区间时间点击的当前初始值
                optionalApprover: [],   // 存放客户自选的审批人数组
                copier: [],   // 用户自选的审批流程抄送人组成的数组
                specifiedCopier: [],   // 审批模板预先指定的抄送人id
                dialogVisible: false,   // 控制查看上传图片的弹窗显隐
                dialogImageUrl: '',   // 上者弹窗的图片地址
                uploaderIdx: null,   // 点击上传组件所在form数组的索引值
                uploaderDetailIdx: null,   // 点击上传组件所在明细组件数组的索引值
                // ============================================= 以下是上传图片的方法 =====================================================
                    chooseRoleView: false,   // 控制选择角色弹窗显隐
                    roleType: 0,   // 角色类型，0为全部
                    roleList: [],   // 存放角色列表
                    userList: [],   // 存放用户列表
                    keyword: '',   // 搜索关键字
                    preMember: [],   // 已选中的联系人 (预选)
                    currentContactItem: null,   // 多选时为'multi',单选时为'single'
                // ============================================= 以上是上传图片的方法 =====================================================
                approverQty: '',   // 当审批人为自选时，存放可选人审批人的数量，值为1时自选1个，值为2时自选多个
                stillQty: 0,   // 存放当可以自选抄送人时还能选多少人的数量
                repeart: false,   // 当提交审批单后此值为true，防止连续提交多个相同的审批单
                options: {
                    target: this.BASE_URL + '/api/resource/res_upload',   // 上传路径
                    testChunks: false,   //是否开启服务器分片校验
                    headers: { Authorization: `Bearer ` + this.$g.access_token },   // 请求头
                    maxChunkRetries: 10,   //最大自动失败重试上传次数
                    singleFile: true,   // 单文件上传  
                },
                statusText: {
                    success: "上传成功",
                    error: "上传出错",
                    uploading: "正在上传...",
                    paused: "暂停",
                    waiting: "等待上传"
                },
                currentUpload: 0,   // 存放当前正在上传的请求数量
            }
        },
        created(){
            if(this.$route.query.examine_id){
            //     this.getFormData(this.$route.query.id,)
            // }else{
                this.getFormSet(this.$route.query.id, this.$route.query.examine_id)
            }else{
                this.getFormSet(this.$route.query.id)
            }
        },
        computed:{
            formData(){
                return this.$route.query.examine_id ? this.ruleForm.form_data : this.ruleForm.form_set;
            },
            // 跟住是否存在examine_id，检测的名字动态改变(明细外)
            propName(){
                return this.$route.query.examine_id ? 'form_data.' : 'form_set.';
            },
            // 跟住是否存在examine_id，检测的名字动态改变(明细内)
            propNameDetail(){
                return this.$route.query.examine_id ? 'form_data[' : 'form_set[';
            },
            /*
                [计算公式的计算结果]
                * @params {object} [计算公式的对象]
                * @params {object} [form表单中的组件对象]
                * @params {String} [内层计算属性为'inside'，外层计算属性为'outside']
                * @params {number} [若是外层计算组件不传参，内层计算组件传明细数组中的索引值]
            */
            equationResult(){
                return function(equation, item, where, detailsIdx, formIndex){
                    let result = '';
                    let form = this.formData;

                    equation = deep_clone(equation.slice(1));

                    // 第一次循环得到计算公式
                    for(let i=0;i<equation.length;i++){
                        if(where == 'inside'){
                            // console.log(1, equation)
                        }
                        /*
                            判断不同的type值做不同的操作，
                            type=undefined时为金额或者数字组件；
                            type=sign时为运算符号或者括号，
                            type=num时为数字
                        */
                        let params = equation[i];
                        if(params.type == undefined){
                            if(where == 'inside'){
                                // console.log(2, params)
                            }
                            if(params.detailIdx === null){
                                for(let j=0;j<form.length;j++){
                                    if(params.formIdx == form[j].formIdx){
                                        params = form[j];
                                    }
                                }

                                result += params.content ? params.content : params.title;
                            }
                            else{
                                if(where == 'inside'){
                                    result += item.detail[params.detailIdx].content ? item.detail[params.detailIdx].content : item.detail[params.detailIdx].title;
                                }else{
                                    let formula = '',qty = 0;
                                    for(let j=0;j<form.length;j++){
                                        if(params.formIdx == form[j].formIdx){
                                            qty++;
                                            formula += form[j].detail[params.detailIdx].content ? form[j].detail[params.detailIdx].content + '+' : form[j].detail[params.detailIdx].title + '+';
                                        }
                                    }

                                    result += qty > 1 ?  '(' + formula.slice(0,formula.length-1) + ')' : formula.slice(0,formula.length-1);
                                }
                            } 
                        }else{
                            result += params.title;
                        }
                    }

                    // 第二次循环判断计算公式中的参数是否有缺失，若有则直接返回计算公式，反则返回计算后的结果
                    for(let i=0;i<equation.length;i++){
                        let params = equation[i];

                        // 只对计算参数有操作，计算符号忽略
                        if(params.type == undefined){

                            // 计算参数在明细组件外的计算过程
                            if(params.detailIdx === null){
                                for(let j=0;j<form.length;j++){
                                    if(form[j].formIdx == params.formIdx && form[j].content === ''){

                                        if(detailsIdx === undefined){
                                            item.content = '';
                                        }else{
                                            item.detail[detailsIdx].content = '';
                                        }

                                        return result
                                    }
                                }
                            }

                            // 计算参数在明细组件内的计算过程
                            else{
                                for(let j=0;j<form.length;j++){
                                    if(form[j].formIdx == params.formIdx && form[j].detail[params.detailIdx].content === ''){

                                        // 计算公式在明细组件内
                                        if(detailsIdx !== undefined){
                                            if(form[j].detail[params.detailIdx].content === ''){

                                                if(detailsIdx === undefined){
                                                    item.content = '';
                                                }else{
                                                    item.detail[detailsIdx].content = '';
                                                }

                                                return result;
                                            }
                                        }

                                        // 计算公式在明细组件外
                                        else{

                                            if(detailsIdx === undefined){
                                                item.content = '';
                                            }else{
                                                item.detail[detailsIdx].content = '';
                                            }

                                            return result;
                                        }
                                    }
                                }
                            } 
                        }
                    }

                    let finalResult = Math.round(eval(result) * 100000)/100000

                    if(detailsIdx === undefined){
                        item.content = finalResult;
                    }else{
                        item.detail[detailsIdx].content = finalResult;
                    }

                    return finalResult;
                }
            },
            // 显示增加明细按钮
            showAddButton(){
                return function(key){
                    let form = this.formData;
                    if(!form[key+1]){
                        return true
                    }else{
                        let name = form[key].title.replace(/\(\d+\)/,''),
                            nextName = form[key+1].title.replace(/\(\d+\)/,'')

                        return  name == nextName ? false : true
                    }
                }
            }
        },
        methods:{
            // 获取审批单详情
            getFormData(id){
                let success = res => {
                    // this.ruleForm = {form_set:res.data.form_set};
                    this.ruleForm = res.data;

                    this.formName = res.data.examine_name;

                    this.ruleForm.form_data.forEach(item=>{
                        if(item.id == 9){
                            item.title = item.title + ' (1)';
                        }
                    });

                }
                this.$ajax({
                    url: "/api/examine/examine",
                    method: "get",
                    params: {
                        id: id,   // 审批单id
                    },
                    func: { success: success }
                })
            },
            // 获取审批模板信息
            getFormSet(id, examine_id){
                let success = res => {
                    // this.ruleForm = {form_set:res.data.form_set};
                    this.ruleForm = res.data;

                    this.formName = res.data.name;

                    if(examine_id === undefined){
                        this.ruleForm.form_set.forEach(item=>{
                            if(item.id == 9){
                                item.title = item.title + ' (1)';
                            }
                        });
                    }

                }

                let params = {
                        id: id,   // 审批模板id
                        user_id: this.$g.user_id,   // 当前登录人id
                    }

                if(examine_id !== undefined){
                    params.examine_id = examine_id;   // 重新提交的审批单Id
                }

                this.$ajax({
                    url: "/api/examine/examineFormwork",
                    method: "get",
                    params: params,
                    func: { success: success }
                })
            },
            // 数字输入框失焦时触发的函数
            resetNumber(index,key){
                let val = key === undefined ? this.formData[index] : this.formData[index].detail[key];

                if(val.content == '') return

                if(val.content.indexOf('.') != val.content.lastIndexOf('.')){
                    val.content = val.content.slice(0,val.content.lastIndexOf('.'))
                }

                val.content = Math.round(val.content * 100000)/100000 + '';
            },
            // 重置数字输入框的数字格式
            resetNumberInput(index,key){
                let val = key === undefined ? this.formData[index] : this.formData[index].detail[key];
            
                val.content = val.content.replace(/[^\d\.]/g,'')

                let idx = val.content.indexOf('.');

                if(idx >= 0){
                    val.content = val.content.slice(0,idx+6);
                }

                if(idx >=0 && idx !== val.content.lastIndexOf('.')){
                    val.content = val.content.slice(0,val.content.lastIndexOf('.'));
                }

                if(idx == 0){
                    val.content = 0 + val.content;
                }
            },
            // 通过事件监听去获取正在操作的上传组件所在数组的索引值
            whichUpload(e,index,detailsIdx){
                // 保证点击上传按钮时才可以存储上传组件所在的的数组索引
                if(e.target.type == 'file'){

                    // 如果还有文件在上传则终止当前上传请求，保证同时只能使用一个上传组件进行上传请求，避免上传成功回调操作是存储位置紊乱
                    if(this.currentUpload > 0){
                        this.$message.warning('当前还有图片或附件在上传，请稍后再试');
                        
                        // 若不满足条件则阻止事件冒泡和浏览器的默认行为
                        if(e.stopPropagation){
                            // w3c的方法取消冒泡
                            e.stopPropagation();
                        }else{
                            // 使用IE的方式来取消冒泡
                            e.cancelBubble = true;
                        }

                        // 先判断是否支持w3c标准方式，否则采用IE解决方案
                        if(e.preventDefault){
                            // w3c的方法是e.preventDefault()
                            e.preventDefault();
                        }else{
                            // IE则使用的是e.returnValue=false
                            e.returnValue = false;
                        }

                        return 
                    }

                    // 以下是存储当前上传组件所在数组索引的操作
                    this.uploaderIdx = index;

                    if(detailsIdx!==undefined){
                        this.uploaderDetailIdx = detailsIdx;
                    }else{
                        this.uploaderDetailIdx = null;
                    }

                }

            },

            // 区间时间中开始时间的change出发事件
            changeValue1(item, dateType){   // 所有的注释代码为不允许开始时间和结束时间相等的操作
                // 日期格式不包括时间的判断
                // if(item.content && item.content2 && dateType == 1){
                    if(item.content && item.content2 && item.content > item.content2){
                        this.$message.warning('开始时间必须在结束时间之前');
                        item.content = this.initDate;
                    }
                // }

                // // 日期格式包括时间时的判断
                // else if(item.content && item.content2 && dateType == 2){
                //     if(item.content > item.content2){
                //         this.$message.warning('开始时间必须在结束时间之前');
                //         item.content = this.initDate;
                //     }
                //     // 判断开始跟结束时间是否相差少于60秒，若是再判断是否是同一个分钟
                //     else if(Math.abs(item.content - item.content2) < 60000 && new Date(item.content).getMinutes() == new Date(item.content2).getMinutes()){
                //         this.$message.warning('开始时间必须在结束时间之前');
                //         item.content = this.initDate;
                //     }
                // }
            },
            // 区间时间中结束事件时间的change出发事件
            changeValue2(item, dateType){   // 所有的注释代码为不允许开始时间和结束时间相等的操作
                // 日期格式不包括时间的判断
                // if(item.content && item.content2 && dateType == 1){
                    if(item.content && item.content2 && item.content > item.content2){
                        this.$message.warning('开始时间必须在结束时间之前');
                        item.content2 = this.initDate;
                    }
                // }

                // // 日期格式包括时间时的判断
                // else if(item.content && item.content2 && dateType == 2){
                //     if(item.content > item.content2){
                //         this.$message.warning('开始时间必须在结束时间之前');
                //         item.content2 = this.initDate;
                //     }

                //     // 判断开始跟结束时间是否相差少于60秒，若是再判断是否是同一个分钟
                //     else if(Math.abs(item.content - item.content2) < 60000 && new Date(item.content).getMinutes() == new Date(item.content2).getMinutes()){
                //         this.$message.warning('开始时间必须在结束时间之前');
                //         item.content2 = this.initDate;
                //     }
                // }
            },

            // ============================================= 以下是上传图片的方法 =====================================================
                // 获取对象中最后一层data数据的方法
                getData(res){
                 return res.data ? this.getData(res.data) : res;
                },
                // 上传图片前的钩子函数 (在此过滤非图片文件)
                beforeUpload(file){
                    if(!file.type.includes('image')){
                        this.$message.error("只能上传图片")
                        return false
                    }
                    this.currentUpload++
                },
                // 若已上传和已选择的文件超过上限则报错的方法
                handleExceed(files, fileList) {
                    this.$message.warning(`当前限制选择 9 个图片，本次选择了 ${files.length} 个图片，共选择了 ${files.length + fileList.length} 个图片`);
                },
                // 上传附件状态改变时的钩子
                onSuccess(response, file, fileList) {
                    this.currentUpload--
                    let data = this.getData(response);
                    if(data.ecode == 200){
                        if(this.uploaderDetailIdx === null){
                            this.formData[this.uploaderIdx].content = fileList.map(item=> {
                                if(item.response){
                                    let data = this.getData(item.response);
                                    return {name: data.file_name, url: this.BASE_URL + data.file_path}
                                }
                                return item;
                            });
                        }else{
                            this.formData[this.uploaderIdx].detail[this.uploaderDetailIdx].content = fileList.map(item=> {
                                if(item.response){
                                    let data = this.getData(item.response);
                                    return {name: data.file_name, url: this.BASE_URL + data.file_path}
                                }
                                return item;
                            });
                        }
                    }

                },
                onError(){
                    this.currentUpload--
                },
                // 删除图片的钩子函数
                onRemove(file, fileList){
                    if(this.uploaderDetailIdx === null){
                        this.formData[this.uploaderIdx].content = fileList.map(item=>item);
                    }else{
                        this.formData[this.uploaderIdx].detail[this.uploaderDetailIdx].content = fileList.map(item=>item);
                    }
                    this.currentUpload--
                },
                // 查看上传图片大图的方法
                uploadPreview(file) {
                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                },
            // ============================================= 以上是上传图片的方法 =====================================================
            
            // ============================================= 以下是上传附件的方法 =====================================================
                // 检测是否超过可选数量
                handleExceedFile(){
                    this.$message.warning('只能上传一个文件');
                },
                // 上传附件前的钩子函数
                beforeUploadFile(file){
                    if(file.size/1024/1024>200){
                        this.$message.warning('只能输入少于200M的文件');
                        return false
                    }
                },
                // 上传附件成功后的钩子函数
                onSuccessFile(response, file, fileList){
                    let data = this.getData(response);
                    if(data.ecode == 200){
                        if(this.uploaderDetailIdx === null){
                            this.formData[this.uploaderIdx].content = fileList.map(item=> {
                                if(item.response){
                                    let data = this.getData(item.response);
                                    return {name: data.file_name, url: this.BASE_URL + data.file_path}
                                }
                                return item;
                            });
                        }else{
                            this.formData[this.uploaderIdx].detail[this.uploaderDetailIdx].content = fileList.map(item=> {
                                if(item.response){
                                    let data = this.getData(item.response);
                                    return {name: data.file_name, url: this.BASE_URL + data.file_path}
                                }
                                return item;
                            });
                        }
                    }
                },
                // 删除上传附件的钩子函数
                onRemoveFile(file, fileList){
                    if(this.uploaderDetailIdx === null){
                        this.formData[this.uploaderIdx].content = [];
                    }else{
                        this.formData[this.uploaderIdx].detail[this.uploaderDetailIdx].content = [];
                    }
                },

                changeFile(idx, detailIdx){
                    if(detailIdx === undefined){
                        this.formData[idx].content = [];
                    }else{
                        this.formData[idx].detail[this.uploaderDetailIdx].content = [];
                    }

                    return false
                },
                fileSuccess(rootFile, file, message, chunk){
                    let data = this.getData(JSON.parse(message));
                    if(this.uploaderDetailIdx === null){
                        this.formData[this.uploaderIdx].content = [{name: data.file_name, url: this.BASE_URL + data.file_path}];
                        this.formData[this.uploaderIdx].process = 100;
                    }else{
                        this.formData[this.uploaderIdx].detail[this.uploaderDetailIdx].content = [{name: data.file_name, url: this.BASE_URL + data.file_path}];
                        this.formData[this.uploaderIdx].detail[this.uploaderDetailIdx].process = 100;
                    }
                    this.currentUpload--
                },
                fileFail(){
                    this.currentUpload--
                },
                fileAded(file){
                    if(file.size/1024/1024 > 200){
                        this.$message.warning("附件最大上传200M");
                        file.ignored = true;
                    }else{
                        this.currentUpload++
                    }
                },
                // 删除正在上传的文件回调方法
                fileRemoved(){
                    this.currentUpload--
                },
                fileProgress(rootFile, file, chunk){
                    let process = (deep_clone(file)._prevProgress * 100).toFixed(2) == 100 ? 99.99 : (deep_clone(file)._prevProgress * 100).toFixed(2)
                    if(this.uploaderDetailIdx === null){
                        this.formData[this.uploaderIdx].process = process;
                    }else{
                        this.formData[this.uploaderIdx].detail[this.uploaderDetailIdx].process = process;
                    }
                },
            // ============================================= 以上是上传附件的方法 =====================================================
            
            // ============================================= 以下是添加用户的方法 =====================================================
                // 打开联系人选择弹窗
                openRoleView(currentItem, approver, approverQty, stillQty, copier){
                    this.chooseRoleView = true;
                    if(currentItem == 'approver'){
                        this.currentContactItem = approver;
                        this.preMember = approver.map(item=>item);
                        this.approverQty = approverQty;
                        this.stillQty = stillQty;
                        this.specifiedCopier = copier? copier.map(item=>item.id) : [];
                    }else{
                        this.currentContactItem = currentItem;
                        this.preMember = currentItem.content.map(item=>item);
                    }
                    this.getRoleList();
                    this.getUserList();
                },
                // 获取角色列表
                getRoleList(){
                    let param = {
                        status:1,   // 状态（1：正常；0：已删除）
                    }

                    let success = (res=>{
                        let data = res.data;
                        this.roleList = [{id:0,name:'全部'},...data];
                    })

                    let fail = ( data => {})

                    this.$ajax.get('/api/role/examineRoleGet',{params: param,func:{success:success,fail:fail}})
                },
                updateUserList(val){
                    this.roleType = val;
                    this.getUserList();
                },
                // 获取指定角色的成员列表
                getUserList(){
                    let listParam = {
                        no_find_class:'1',   // 固定传 1 （不查询班级，选择性用，因为查询班级时数据量过大是会出现超时）
                        data_type: 0,   // 数据类型（0：无分页，2：有分页）
                        not_in_id: JSON.parse(sessionStorage.getItem('user_info_str')).id,  // 需要排除的用户（用户id 可int，可array）此处要排除登录的人
                        role_id: this.roleType,   // 角色id（不传或传0可获取全部用户）
                        n_n_e: this.keyword,   // 搜索关键字
                    }
                    
                    // let arr = [];
                    // // 如果存在已选的账号则排除已选的账号id
                    // if(arr.length){
                    //     listParam.not_in_id = arr.map(item=>itent.id);   // 需要排除的用户（用户id 可int，可array）
                    // }

                    let success = (res=>{
                        let data = res.data;
                        this.userList = data;
                    })

                    let fail = ( data => {})
                    //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                    this.$ajax.get('/api/user/user',{params: listParam,func:{success:success,fail:fail}})
                },
                // 添加成员
                addMember(key){
                    if(this.currentContactItem.content !== undefined && this.currentContactItem.count == 'single' && this.preMember.length >= 1){
                        this.$message.warning('最多只能选择' + 1 + '个人')
                        return
                    }else if(this.currentContactItem.content === undefined && this.approverQty == 1 && this.preMember.length >= 1){
                        this.$message.warning('最多只能选择' + 1 + '个审批人')
                        return
                    }else if(this.currentContactItem.content === undefined && this.approverQty == 2 && this.preMember.length >= 5){
                        this.$message.warning('最多只能选择' + 5 + '个审批人')
                        return
                    }else if(this.currentContactItem.content === undefined && this.approverQty == 10){
                        if(this.specifiedCopier.includes(this.userList[key].id)){
                            this.$message.warning('该用户已选')
                            return
                        }else if(this.preMember.length >= this.stillQty){
                            this.$message.warning('一共最多只能选择' + 10 + '个抄送人')
                            return
                        }else if(this.preMember.includes(this.userList[key])){
                            this.$message.warning('该用户已选')
                            return
                        }
                        
                    }else if(this.preMember.includes(this.userList[key])){
                        this.$message.warning('该用户已选')
                        return
                    }

                    let arr = this.preMember;
                    let val = this.userList[key];

                    this.preMember.push(this.userList[key]);
                },
                // 取消已选择的成员
                cancelMember(idx){
                    this.preMember.splice(idx,1);
                },
                // 确认已选好的指定人员
                affirmFinalmember(){
                    // 把选好的联系人保存到对应的联系人content数组中
                    this.chooseRoleView=false
                    if(this.currentContactItem.content === undefined){
                        let arr = new Array(this.currentContactItem.length);
                        for(let i=0;i<arr.length;i++){
                            this.currentContactItem.pop();
                        }
                        this.preMember.forEach(item=>{
                            this.currentContactItem.push(item);
                        })
                    }else{
                        this.currentContactItem.content = this.preMember.map(item=>item);
                    }
                    // this.role = this.preMember.map(item=>item)
                },
                // 取消已选好的指定人员
                cancelFinalmember(){
                    this.chooseRoleView=false
                },
                // 按照关键字搜索 （出入狂按钮聚焦时按回车触发）
                searchUser(keyword,event){
                    event.target.blur();
                    this.keyword = keyword.trim();
                    this.getUserList();
                },
            // ============================================= 以上是添加用户的方法 =====================================================

            // 增加明细的方法
            addDetail(key,item){
                let detail = deep_clone(item),form = this.formData,qty = 1;

                let arr = detail.detail;

                for(let i=0;i<arr.length;i++){
                    if(arr[i].id < 5 || arr[i].id == 6 || arr[i].id == 11 || arr[i].id == 14){
                        arr[i].content = '';
                    }else if(arr[i].id == 7){
                        arr[i].content = arr[i].content2 = '';
                    }else if(arr[i].id == 5 || arr[i].id == 8 || arr[i].id == 12 || arr[i].id == 13){
                        arr[i].content = [];
                    }
                }

                for(let i=0;i<form.length;i++){
                    if(form[i].formIdx == item.formIdx){
                        form[i].title = form[i].title.replace(/\(\d+\)/,'(' + qty++ + ')')
                    }
                }

                detail.title = detail.title.replace(/\(\d+\)/,'(' + qty-- + ')')

                this.formData.splice(item.formIdx + qty,0,detail)
            },
            // 删除明细的方法
            deleteDetail(key,item){
                let form = this.formData,
                    formIdx = item.formIdx,   // 获取审批单生成时的明细索引值
                    qty = 0,   // 记录form中一共有多少个索引值相同的明细
                    qty2 = 1;

                for(let i=0;i<form.length;i++){
                    if(form[i].formIdx == formIdx) qty++;
                }

                if(qty >= 2) form.splice(key,1);

                for(let i=0;i<form.length;i++){
                    if(form[i].formIdx == item.formIdx){
                        form[i].title = form[i].title.replace(/\(\d+\)/,'(' + qty2++ + ')')
                    }
                }

            },
            // 删除数组中指定索引值参数的方法
            deleteArrIdx(arr,key){
                arr.splice(key,1);
            },
            // 提交审批单的方法
            submitForm() {
                this.$refs.ruleForm.validate((valid) => {
                    if(this.repeart){
                        return 
                    }

                    if(this.currentUpload > 0){
                        this.$message.warning('当前还有图片或附件在上传，请稍后再试');
                        return
                    }
                    
                    if (valid) {
                        let approver = [],   // 审批人id数组
                            copier = []   // 抄送人id数组


                        // 重置审批人
                        if(this.optionalApprover.length > 0){
                            this.ruleForm.approver = this.optionalApprover;
                        }
                        approver = this.ruleForm.approver.map(item=>item.id);

                        // 合并预选和自选的抄送人
                        this.ruleForm.copier.forEach(item=>{
                            copier.push(item)
                        });
                        this.copier.forEach(item=>{
                            copier.push(item)
                        });
                        copier = copier.map(item=>item.id);

                        let formData = this.formData;

                        // 置换掉上传文件后手动添加的BASE_URL的方法
                        let replaceBaseURL = arr => {
                            for(let i=0;i<arr.length;i++){
                                if(arr[i].id == 8 || arr[i].id == 12){
                                    for(let j=0;j<arr[i].content.length;j++){
                                        arr[i].content[j].url = arr[i].content[j].url.replace(this.BASE_URL, '');
                                    }   
                                }else if(arr[i].id == 9){
                                    replaceBaseURL(arr[i].detail)
                                }
                            }
                        }

                        replaceBaseURL(formData);

                        let data = {
                            examine_formwork_id: this.ruleForm.id,   // 审批模板id
                            form_data: JSON.stringify(formData),   // 表单数据（对应模板表的参数）
                            create_id: this.$g.user_id,   // 创建人id（当前登录人id）
                            approver: approver,   // 审批人id
                            copier: copier,   // 抄送人id
                        };

                        let success = res => {
                            this.$message.success('审批单提交成功');
                            this.$router.back();
                        }

                        let fail = res => {
                            this.repeart = false;

                            this.$message.error(res.msg);
                        }

                        this.repeart = true;

                        this.$ajax({
                            url:'/api/examine/examine',
                            method:'post',
                            data: data,
                            func: { success: success }
                        })

                    } else {
                        this.$message.warning('请完善表单必填项');
                        return false;
                    }
                });
            },
        }
    }
</script>

<style type="text/css" lang="scss">
    #examine{
        .aplly-detail{
            position: relative;
            margin-top: 25px;
            height: 100%;
            background: #FFFFFF;
            box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
            border-radius: 3px;

            // 面包屑导航栏
            >p{
                position: absolute;
                top: -28px;
                left: 0;
                font-size: 14px;
                color: #333333;

                >span:last-child{
                    color: #999;
                }

                >.arrow{
                    margin: 0 10px;
                }

            }

            // 主题内容
            >.detail{
                height: 100%;

                // form详情
                >div{
                    position: relative;
                    box-sizing: border-box;
                    padding: 60px 0 80px 0;
                    width: 840px;
                    height: 100%;
                    overflow-x: hidden;

                    .el-form{
                        padding: 0 60px 0 40px;
                        height: 100%;
                        overflow-x: hidden;

                        >div{
                            margin-bottom: 22px;

                            .el-form-item{
                                &:last-child{
                                    margin: 0;
                                }

                                .el-form-item__label{
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    color: #000;
                                    font-weight: 600;
                                }

                                .el-form-item__content{

                                    // 多行输入框
                                    .textarea{
                                        // padding: 5px 15px 35px;
                                        // border: 1px solid #DCDFE6;

                                        >textarea{
                                            padding-bottom: 35px;
                                            min-height: 140px !important;
                                            max-height: 250px;
                                            text-align: justify;
                                            // border: 0 none;
                                        }

                                        >.el-input__count{
                                            padding-right: 5px;
                                            left: 1px;
                                            right: 6px;
                                            bottom: 1px;
                                            line-height: 30px;
                                            text-align: right;
                                            border-bottom-left-radius: 4px;
                                            border-bottom-right-radius: 10px;
                                        }

                                    }

                                    // 数字输入框
                                    .number{
                                        // 在Chrome下:
                                        >input::-webkit-outer-spin-button,
                                        >input::-webkit-inner-spin-button {
                                            -webkit-appearance: none !important;
                                            margin: 0; 
                                        }

                                        // Firefox下:
                                        >input[type="number"] {
                                            -moz-appearance: textfield;
                                        }
                                        
                                    }

                                    // 单选框、多选框
                                    .select{
                                        width: 100%;
                                    }

                                    // 日期、日期区间
                                    .date{
                                        width: 100%;

                                        >input{
                                            padding-left: 15px;
                                        }

                                        >.el-input__prefix{
                                            display: none;

                                        }

                                        &+.dateIcon{
                                            position: absolute;
                                            top: 10px;
                                            right: 8px;
                                        }

                                        &:hover{
                                            &+.hideIcon{
                                                display: none;
                                            }
                                        }
                                    }

                                    // 上传图片
                                    .uploader{
                                        &+span{
                                            position: absolute;
                                            top: 20px;
                                            left: -140px;
                                            font-size: 12px;
                                            color: #999999;
                                            letter-spacing: 0.1px;
                                        }

                                        .el-upload-list{
                                            font-size: 0;

                                            >li{
                                                margin-right: 12px;
                                                margin-bottom: -4px;
                                                width: 190px;
                                                height: 190px;

                                                &:nth-child(3n){
                                                    margin-right: 0;
                                                }

                                            }

                                        }

                                        .el-upload{
                                            width: 190px;
                                            height: 190px;
                                            background: #fff;

                                            .el-icon-plus{
                                                font-size: 50px;
                                                line-height: 188px;
                                            }

                                        }

                                    }

                                    //上传图片隐藏添加图片div
                                    .max > .el-upload{
                                        display: none;
                                    }

                                    // element 上传附件
                                    .accessory{
                                        &+span{
                                            position: absolute;
                                            top: 20px;
                                            left: -140px;
                                            font-size: 12px;
                                            color: #999999;
                                            letter-spacing: 0.1px;
                                        }

                                        .el-upload-list{
                                            height: 66px;
                                            border: 1px solid #DDDDDD;
                                            background: url(../../../assets/images/examine/accessory.png) no-repeat 18px 8px;

                                            >li{
                                                margin-top: 32px;
                                                padding: 0 13px;

                                                .progressbar{
                                                    width: 96%;
                                                }
                                            }
                                        }

                                        .clickUpload{
                                            font-size: 14px;
                                            color: #348EFC;
                                            letter-spacing: 0.13px;
                                        }

                                    }

                                    // vue-simple-uploader上传附件
                                    .uploader-example{
                                        .uploader-btn{
                                            padding: 0;
                                            font-size: 14px;
                                            color: #348EFC;
                                            letter-spacing: 0.13px;
                                            border: 0 none;

                                            &:hover{
                                                background-color: #fff;
                                            }

                                        }

                                        .uploader-list>ul{
                                            padding-top: 32px;
                                            height: 34px;
                                            line-height: 34px;
                                            border: 1px solid #DDDDDD;
                                            background: url(../../../assets/images/examine/accessory.png) no-repeat 18px 8px;

                                            >li{
                                                .uploader-file{
                                                    height: 34px;
                                                    line-height: 34px;
                                                    border: 0 none;

                                                    .uploader-file-progress{
                                                        background: #fff;
                                                    }

                                                    .uploader-file-info{
                                                        .uploader-file-name{
                                                            margin-left: 15px;
                                                            width: 48%;
                                                            text-indent: 0;

                                                            > i{
                                                                display: none;
                                                            }

                                                        }

                                                        .uploader-file-size{
                                                            text-indent: 13px;
                                                        }

                                                        .uploader-file-meta{
                                                            width: 0;
                                                        }

                                                        .uploader-file-status{
                                                            >span:nth-child(2){

                                                                >em{
                                                                    margin-left: 8px;
                                                                }

                                                                > i{
                                                                    display: none;
                                                                    width: 20%;
                                                                }

                                                            }

                                                        }

                                                        .uploader-file-actions{
                                                            float: right;

                                                            >span{
                                                                margin-top: 9px;
                                                            }

                                                        }

                                                    }

                                                }

                                            }

                                        }

                                        .file{
                                            padding: 32px 15px 0;
                                            height: 34px;
                                            line-height: 34px;
                                            border: 1px solid #DDDDDD;
                                            background: url(../../../assets/images/examine/accessory.png) no-repeat 18px 8px;

                                            >span{
                                                width: 95%;
                                                height: 34px;
                                                line-height: 34px;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                                white-space: nowrap;
                                            }

                                            >i{
                                                margin-top: 9px;
                                                width: 16px;
                                                height: 16px;
                                                cursor: pointer;
                                                background: url('../../../assets/images/examine/icon_img.png') 2px -34px;

                                            }

                                            &:hover > i {
                                                background-position: 21px -34px;
                                            }

                                        }

                                    }

                                    // 联系人
                                    .contacts{
                                        font-size: 14px;
                                        color: #348EFC;
                                        letter-spacing: 0.13px;;
                                    }

                                    // 计算公式
                                    .calculate{
                                        padding-top: 10px;
                                        color: #606266;
                                        line-height: 20px;
                                    }

                                    // 审批流程
                                    .examineFlow{
                                        position: relative;
                                        padding: 0 40px 15px 62px;
                                        min-height: 60px;
                                        line-height: 16px;
                                        border-bottom: 1px solid #EFEFEF;
                                        
                                        >.el-icon-plus{
                                            position: absolute;
                                            top: 6px;
                                            right: 0;
                                            width: 38px;
                                            height: 38px;
                                            line-height: 38px;
                                            font-size: 20px;
                                            color: #0088EF;
                                            text-align: center;
                                            border-radius: 50%;
                                            border: 1px dashed #0088EF;
                                        }

                                        >.fl{
                                            width: 92px;

                                            >.flow{
                                                position: absolute;
                                                top: 6px;
                                                left: 47px;
                                                width: 1px;
                                                height: 100%;
                                                background: #D8D8D8;
                                                &::after{
                                                    content: '';
                                                    position: absolute;
                                                    top: 0;
                                                    left: -7px;
                                                    width: 14px;
                                                    height: 14px;
                                                    border-radius: 50%;
                                                    background: #D8D8D8;
                                                }
                                            }
        
                                            >p{
                                                line-height: 26px;
                                            }

                                            >span{
                                                padding-left: 3px;
                                                font-size: 12px;
                                                color: #999999;
                                                letter-spacing: 0.1px;
                                            }

                                        }

                                        >.fr{
                                            width: 400px;
                                            text-align: right;

                                            .approvers{
                                                position: relative;
                                                display: inline-block;
                                                margin-top: 6px;
                                                padding-right: 40px;
                                                width: 40px;

                                                >img:first-child{
                                                    margin-bottom: 12px;
                                                    width: 40px;
                                                    height: 40px;
                                                    object-fit: cover;
                                                    border-radius: 50%;
                                                }
                                                
                                                >p{
                                                    height: 32px;
                                                    line-height: 16px;
                                                    font-size: 12px;
                                                    color: #666666;
                                                    letter-spacing: 0.1px;
                                                    text-align: center;
                                                    text-overflow: -o-ellipsis-lastline;
                                                    -webkit-box-orient: vertical;
                                                    overflow: hidden;
                                                    text-overflow: ellipsis;
                                                    display: -webkit-box;
                                                    -webkit-line-clamp: 2;
                                                    line-clamp: 2;
                                                }

                                                .close{
                                                    position: absolute;
                                                    top: -3px;
                                                    left: 28px;
                                                }

                                                .icon{
                                                    position: absolute;
                                                    top: 20px;
                                                    right: 20px;
                                                    transform: translate(50%, -50%);
                                                }

                                            }

                                        }

                                    }

                                    .examineFlow2{
                                        position: relative;
                                        padding: 0 40px 15px 62px;
                                        min-height: 90px;
                                        line-height: 16px;
                                        
                                        >.el-icon-plus{
                                            position: absolute;
                                            top: 24px;
                                            right: 0;
                                            width: 38px;
                                            height: 38px;
                                            line-height: 38px;
                                            font-size: 20px;
                                            color: #0088EF;
                                            text-align: center;
                                            border-radius: 50%;
                                            border: 1px dashed #0088EF;
                                        }

                                        >.fl{
                                            padding-top: 45px;
                                            width: 92px;

                                            >.flow{
                                                position: absolute;
                                                top: 5px;
                                                left: 47px;
                                                width: 1px;
                                                height: 70px;
                                                background: #D8D8D8;
                                                &::after{
                                                    content: '';
                                                    position: absolute;
                                                    bottom: 0;
                                                    left: -7px;
                                                    width: 14px;
                                                    height: 14px;
                                                    border-radius: 50%;
                                                    background: #D8D8D8;
                                                }
                                            }
            
                                            >p{
                                                line-height: 26px;
                                            }

                                            >span{
                                                padding-left: 3px;
                                                font-size: 12px;
                                                color: #999999;
                                                letter-spacing: 0.1px;
                                            }

                                        }

                                        >.fr{
                                            padding-top: 24px;
                                            width: 400px;
                                            text-align: right;

                                            .copier{
                                                position: relative;
                                                display: inline-block;
                                                padding-right: 40px;
                                                width: 40px;

                                                >img:first-child{
                                                    margin-bottom: 12px;
                                                    width: 40px;
                                                    height: 40px;
                                                    object-fit: cover;
                                                    border-radius: 50%;
                                                }
                                                
                                                >p{
                                                    height: 32px;
                                                    line-height: 16px;
                                                    font-size: 12px;
                                                    color: #666666;
                                                    letter-spacing: 0.1px;
                                                    text-align: center;
                                                    text-overflow: -o-ellipsis-lastline;
                                                    -webkit-box-orient: vertical;
                                                    overflow: hidden;
                                                    text-overflow: ellipsis;
                                                    display: -webkit-box;
                                                    -webkit-line-clamp: 2;
                                                    line-clamp: 2;
                                                }

                                                .close{
                                                    position: absolute;
                                                    top: -3px;
                                                    left: 28px;
                                                }

                                                .icon{
                                                    position: absolute;
                                                    top: 20px;
                                                    right: 20px;
                                                    transform: translate(50%, -50%);
                                                }

                                            }

                                        }
                
                                        >.flow{
                                            position: absolute;
                                            top: 5px;
                                            left: 47px;
                                            width: 1px;
                                            height: 70px;
                                            background: #D8D8D8;
                                            &::after{
                                                content: '';
                                                position: absolute;
                                                bottom: 0;
                                                left: -7px;
                                                width: 14px;
                                                height: 14px;
                                                border-radius: 50%;
                                                background: #D8D8D8;
                                            }
                                        }

                                        >p{
                                            padding-top:45px;
                                            line-height: 26px;
                                        }
    
                                        >span{
                                            padding-left: 3px;
                                            font-size: 12px;
                                            color: #999999;
                                            letter-spacing: 0.1px;
                                        }

                                    }
                    
                                }

                            }

                            // 请填写说明文字
                            .caption{
                                display: inline-block;
                                padding: 10px 0;
                                min-height: 20px;
                                line-height: 20px;

                                &:hover{
                                    color: #00f;
                                }
                            }

                            // 明细组件
                            &.detailTemplate{
                                position: relative;
                                margin-bottom: 22px;
                                >p{
                                    padding: 26px 0;
                                    font-size: 12px;
                                    color: #666666;
                                }
                                .top-line{
                                    display: block;
                                    width: 100%;
                                    height: 0;
                                    border-top: 2px dashed #DDDDDD;
                                }
                                .bottom-line{
                                    display: block;
                                    padding-top: 22px;
                                    width: 100%;
                                    height: 0;
                                    border-top: 2px dashed #DDDDDD;
                                }
                                >.el-icon-close{
                                    display: none;
                                    position: absolute;
                                    top: 10px;
                                    right: -3px;
                                    font-size: 20px;
                                    color: red;
                                    cursor: pointer;
                                }
                                &:hover >.el-icon-close{
                                    display: block;
                                }
                                .addDetail{
                                    padding: 11px 20px;
                                    border-width: 0;
                                    color: #7C9BB8;
                                    background: #DEEFFF;

                                    >span{
                                        padding-left: 20px;
                                    }
                                }
                            }
                            
                        }

                    }
    
                    
                    .submit{
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        padding-top: 16px;
                        width: 100%;
                        height: 52px;
                        box-shadow: 0 0 5px 0 rgba(198,198,198,0.50);
                        .el-button{
                            display: block;
                            margin: 0 auto;
                            width: 400px;
                        }
                    }
                }

                // 侧边栏
                >aside{
                    position: relative;
                    width: 360px;
                    height: 100%;
                    background: #BAE0F9;
                    overflow: hidden;
                    >img{
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                    }
                }

                // 弹窗样式
                .el-dialog__wrapper{
                    
                    // 选择联系人弹窗
                    .contacts{
                        padding: 20px 40px 0;
                        font-size: 16px;

                        >div{
                            &:first-child{
                                .el-input{
                                    width: 260px;

                                    input{
                                        font-size:14px;
                                    }

                                    input::-webkit-input-placeholder{
                                        font-size:14px;
                                    }

                                }

                            }

                            &:nth-child(2){
                                margin-left: 20px;
                                width: 400px;

                                .el-input{
                                    width: 240px;

                                    input{
                                        font-size: 14px;
                                    }

                                    input::-webkit-input-placeholder{
                                        font-size: 14px;
                                    }

                                }

                                .el-button{
                                    margin-left: 11px;
                                    width: 82px;
                                }

                            }

                            &:nth-child(3){
                                margin-top: 20px;
                                padding: 4px;
                                box-sizing: border-box;
                                width: 260px;
                                height: 288px;
                                border: 1px solid #DDDDDD;

                                >ul{
                                    height: 100%;
                                    overflow-X: hidden;

                                    li{
                                        height: 36px;

                                        span{
                                            box-sizing: border-box;
                                            margin: 8px 0;
                                            padding-left: 8px;
                                            width: 40%;
                                            height: 20px;
                                            font-size: 14px;
                                            line-height: 20px;
                                            color: #000000;
                                            letter-spacing: 0.11px;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;

                                            &:last-child{
                                                width: 17%;
                                                color: #348EFC;
                                            }

                                        }

                                    }

                                }

                            }

                            &:nth-child(4){
                                position: relative;
                                margin-top: 20px;
                                margin-left: 20px;
                                padding-top: 36px;
                                box-sizing: border-box;
                                width: 440px;
                                height: 288px;
                                border: 1px solid #DDDDDD;
                                overflow: hidden;
                                >ul{
                                    overflow-X: hidden;
                                    height: 100%;
                                    li{
                                        &:first-child{
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            right: 0;
                                            padding-right: 15px;
                                            background: #EFEFEF;
                                            span: first-child{
                                                box-sizing: border-box;
                                                padding-left: 27px;
                                            }
                                        }
                                        width: 425px;
                                        height: 36px;
                                        font-size: 14px;
                                        color: #000000;
                                        letter-spacing: 0.11px;
                                        span{
                                            box-sizing: border-box;
                                            margin: 8px 0;
                                            padding-left: 8px;
                                            width: 38%;
                                            height: 20px;
                                            font-size: 14px;
                                            line-height: 20px;
                                            color: #000000;
                                            letter-spacing: 0.11px;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                            &:first-child{
                                                vertical-align: middle;
                                                .el-icon-close.pointer{
                                                    vertical-align: middle;
                                                    font-size: 20px;
                                                    color: #999999;
                                                    &:hover{
                                                        color: #5cb6ff;
                                                    }
                                                }

                                            }
                                            &:nth-child(2){

                                            }
                                            &:last-child{
                                                width: 23%;
                                                padding-left: 14px;
                                            }

                                        }

                                    }

                                }

                            }

                        }

                    }

                }

            }

        }

        .el-form-item.is-success .el-input__inner, .el-form-item.is-success .el-textarea__inner{
            border-color: #dcdfe6;
        }

        .el-form-item.is-success .el-input__inner:focus, .el-form-item.is-success .el-textarea__inner:focus {
            border-color: #409EFF;
        }

    }
</style>